<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    
</head>
<body>
    <div id="app">  
      <div>
        <el-button type="danger" icon="el-icon-delete" @click="handleBatchDelete"  >批量删除</el-button>
      </div>      
      <el-table
        :data="books"
        border
        style="width: 900px"
        ref="myTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column 
          type="selection"  
          align="center" 
          width="50">          
        </el-table-column>
        <el-table-column
          prop="f_id"
          label="书号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="f_title"
          label="书名"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="f_author"
          label="作者"
          align="center">
        </el-table-column>
        <el-table-column
          prop="f_type"
          label="类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="f_price"
          label="价格"
          :formatter="moneyFormat"
          align="center">
        </el-table-column>
        <el-table-column label="操作"  align="center" width="200">
          <template slot-scope="scope">            
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div>
        <el-tag type="success">总价格：￥{{totalPrice}}</el-tag>
      </div>
    </div> 
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script> 

    <script>
        let vm = new Vue({
            el:'#app',
            data:{                    
                    books:[], //数据库的图书,
                    selectBooks:[], //待删除的图书
            },

            //计算属性
            computed: {
              totalPrice(){
                  let sum = 0;
                  this.books.forEach(bk=>sum += bk.f_price)
                  return sum;
              },
            },

            /**********方法**********/
            methods:{
                f1(){
                    let _this = this //保存对Vue实例的引用
                    //发出ajax请求，获取服务器中图书表的记录
                    axios.get('http://localhost:44355/Book/Index')
                         .then(function (rs) {
                        _this.books = rs.data //将获取的图书保存到数组
                    })
                },
                //货币格式化
                moneyFormat(row, column, cellValue, index){
                    return '￥' + cellValue
                },

                //当选择发生变化时
                handleSelectionChange(val){
                  this.selectBooks = val                  
                },

                //删除
                handleDelete(index, row){
                  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {                          
                        //删除
                        let _this = this //保存对Vue实例的引用
                        
                        axios.get('http://localhost:44355/Book/delete/' + row.f_id)
                            .then(function (rs) {  
                                                    
                                //删除后，刷新表格，显示最新的数据
                                axios.get('http://localhost:44355/Book/Index')
                                .then(function (rs) {
                                _this.books = rs.data //将获取的图书保存到数组
                                })
                            })
                        
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                  }).catch(() => {
                    this.$message({ type: 'info', message: '已取消删除'});          
                  });
                },

                //批量删除
                handleBatchDelete(){
                  this.$confirm('确定要删除吗？, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    //ajax删除
                    let _this = this
                    let ids = ''
                    _this.selectBooks.forEach(bk=>{
                      ids += bk.f_id + ','  //1,2,3
                    })
                    //割尾巴
                    ids = ids.substring(0,ids.length-1)
                    axios.get('http://localhost:44355/Book/batchDelete/' + ids)
                         .then(function (rs) {
                          //发出ajax请求，获取服务器中图书表的记录
                            axios.get('http://localhost:44355/Book/Index')
                                .then(function (rs) {
                                _this.books = rs.data //将获取的图书保存到数组
                          })
                        console.log(rs.data);
                    })


                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                  }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消删除'
                    });          
                  });
                }
            },
            //生命周期：类似webform的 XX_load( )
            created(){
                this.f1()
            },
        })
    </script>
</body>
</html>